import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtQuick 2.14
import QtGraphicalEffects 1.14
// import Qt.Singleton 1.0
Item {
    id: container
    width: ListView.view.width
    height: columnlayout.height


    property int itemLeftMargin:  10 + tier*10

    property int itemIndex: index
    property int crtIndex: container.ListView.view.currentIndex



    function checkCurrentIndexIsChild(subitem) {

        if(subitem.count <= 0) return false;

        for(let i = 0; i < subitem.count; i++) {
            let model = subitem.get(i);

            if(model.subItem.count > 0) {
                let ret = checkCurrentIndexIsChild(model.subItem);
                if(ret !== null) {
                    return ret;
                }
            } else {
                if(model.toIndex === strechCurrentIndex)
                    return true;
            }

        }
        return false;

    }

    property int  dataState: strechCurrentIndex == toIndex ? 0 :  mouse.containsMouse ? 1
                    :  checkCurrentIndexIsChild(subItem) ? 2 : -1

    ColumnLayout {
        id: columnlayout
        anchors.centerIn: parent

        width: parent.width
        spacing: 0

        Item {
            id: content
            Layout.fillWidth: true
            Layout.preferredHeight: subItem.count > 0   ?  40 :  menu.height //itemHeight :  menu.height


            Rectangle {
                id: frontRect
                anchors.fill: parent
                anchors.leftMargin: 14
                anchors.rightMargin: 9
                anchors.topMargin: 2
                anchors.bottomMargin: 2

                color: "transparent" //Qt.rgba(255,255,255,0.5)


                Behavior on color {
                    ColorAnimation { duration: 200 }
                }

                radius:  6
                ColumnLayout{
                    anchors.fill: parent
                    anchors.margins: 0
                    anchors.leftMargin:0   // subItem.count > 0 ? itemLeftMargin-20 : itemLeftMargin
                    anchors.rightMargin: 0 //
                    spacing: 5



                    Rectangle{
                        color: "transparent"
                        visible: subItem.count !== 0
                        width: frontRect.width
                        height: frontRect.height

                        Text {
                            anchors.leftMargin: 10
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                            font.family: "Microsoft Yahei"
                            text: name
                            font.pixelSize: 16
                            color: stretch ? "#fff" :toIndex == strechCurrentIndex ?  "#fff":Qt.rgba(255,255,255,0.5)
                            elide: Text.ElideRight
                            clip: true
                            scale: tier < 4 ? 1.0 -  tier*0.04 : 0.84
                        }

                        Image {
                            visible: subItem.count > 0 ? true : false
                            width: 20
                            height: 20
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.rightMargin: 10
                            anchors.right: parent.right
                            mipmap: true
                            source: "qrc:/img/indicator_up.png"
                            rotation: !stretch ? 0 : 180
                            id:icon

                            Behavior on rotation {
                                NumberAnimation { duration: 300 }
                            }
                            ColorOverlay{
                                anchors.fill: parent
                                source: parent
                                color: stretch ? "#fff":Qt.rgba(255,255,255,0.5)
                            }
                        }

                        Rectangle {
                            visible: !stretch//icon.rotation === 0
                            width: parent.width
                            height: 1
                            color:Qt.rgba(255,255,255,0.8)
                            anchors.bottom: parent.bottom
                        }

                        MouseArea {
                            id: mouse
                            anchors.fill: parent
                            hoverEnabled: true
                            onClicked:  {
                                if(subItem.count > 0) {
                                    stretch = !stretch
                                }
                                // else if(strechCurrentIndex != toIndex) {
                                //     strechCurrentName = name
                                //     strechCurrentIndex = toIndex
                                //     switchPage(strechCurrentName)
                                //     console.log(strechCurrentName,strechCurrentIndex)
                                // }
                                strechCurrentType = type
                                switchShow(strechCurrentType)


                            }
                        }
                    }
                }
            }

           ColumnLayout{
               id:menu
               // anchors.fill: parent
               // anchors.leftMargin: 14
               // anchors.rightMargin: 9
               // anchors.topMargin: 4
               // anchors.bottomMargin: 4
               anchors.horizontalCenter:  parent.horizontalCenter
            Rectangle {
                id:nesting
                width: content.width - 23
                height: 240
                Layout.leftMargin: 4
                color:"transparent" //Qt.rgba(255,255,255,0.5)
                visible:  subItem.count === 0  && strechCurrentType === "nesting"


                ExNestingControl{
                   id:nestingControl
                   anchors.fill: parent
                   anchors.bottomMargin: 4
                }

                Rectangle {
                  width: parent.width
                  height: 1
                  color:Qt.rgba(255,255,255,0.8)
                  anchors.top: nestingControl.bottom
                }
            }

            Rectangle {
                id:quality
                Layout.leftMargin: 4
                // anchors.fill: parent
                // anchors.leftMargin: 14
                // anchors.rightMargin: 9
                // anchors.topMargin: 4
                // anchors.bottomMargin: 4
                width: content.width - 23
                height: 200
                color: Qt.rgba(255,255,255,0.5)
                visible:  subItem.count === 0  && strechCurrentType === "quality"

                Rectangle {
                  width: parent.width
                  height: 1
                  color:Qt.rgba(255,255,255,0.8)
                  anchors.bottom: parent.bottom
                }
            }

            Rectangle {
                id:wink
                width: content.width - 23
                Layout.leftMargin: 4
                height: 400
                color: 'transparent' //Qt.rgba(255,255,255,0.5)
                visible:  subItem.count === 0  && strechCurrentType === "wink"

                ExWInkControl{
                   id:winkControl
                   anchors.fill: parent
                   anchors.bottomMargin: 4
                }

                Rectangle {
                  width: parent.width
                  height: 1
                  color:Qt.rgba(255,255,255,0.8)
                  anchors.top: winkControl.bottom
                }
            }
           }

        }

        ListView {
            id: subView
            model: subItem
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter

            Layout.preferredHeight:  stretch  ?subView.contentHeight : 0
            visible: true
            clip: true
            currentIndex: -1
            delegate: stretchList.delegate

            Behavior on Layout.preferredHeight {
                SequentialAnimation {
                        PauseAnimation { duration: 70 }
                        NumberAnimation { duration: 200 }
                    }
            }

            displaced: Transition {
                NumberAnimation { properties: "x,y"; duration: 90 }
            }
            Behavior on height {
                    PropertyAnimation { duration: 100 }
                }
        }

    }


}
